<template>
    <div class="buildingOperations-box">
        <!-- <div class="left">
            <p v-for="(item,index) in info[nameType]" :key="index" @click="click(item)"
                :class="item==title?'active':''">{{item}}
            </p>
        </div> -->
        <div class="right">
            <div style="display:flex;justify-content: flex-end;">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="item.name" :name="item.value" v-for="(item,index) in data"
                        :key="item.name"></el-tab-pane>
                </el-tabs>
            </div>
            <HBar v-if="activeName=='a'" class="echarts" :data="HBarData" :axisLabel="16" :labelSize="18" :barWidth="25"
                unit="" :extraLegend="{ top: '3%',
                left: '3%', right: '5%' , bottom: '3%' }" />
            <EchartsLine v-else-if="activeName=='b'" class="echarts" :data="lineData" labelUnit=""
                color="rgba(18, 220, 221," :extraGrid="{top:'7%',left:'5%'}" />
            <EchartsPieLabel v-else-if="activeName=='c'" labelUnit="户" class="echarts" :data="pieData" label="447人" />
            <EchartsPieLabel v-else-if="activeName=='d'" labelUnit="只" class="echarts" :data="pieData2" label="83只" />
        </div>
    </div>
</template>

<script>
    import HBar from "@/components/echarts/bar/horizontalBar";
    export default {
        name: 'BuildingOperations',
        components: {

            HBar,

        },
        props: {
            data: {
                // 返回的数据
                type: Array,
                default: function () {
                    return [
                        {
                            value: 'a',
                            name: "进行项目",
                        },
                        {
                            value: 'b',
                            name: "问题分析",
                        },
                        {
                            value: 'c',
                            name: "居住分析",
                        },
                        {
                            value: 'd',
                            name: "宠物分析",
                        }
                    ];
                },
            },
        },
        data() {
            return {
                title: "行政街区",
                activeName: "a",
                nameType: 'a',//街道、社区、小区
                info: {
                    a: ['振华路街道', '沧口街道', '兴华路街道', '兴城路街道', '李村街道', '虎山路街道', '浮山路街道', '楼山街道', '九水街道', '世园街道'],
                    b: ['福岛路社区', '浮山路社区', '南庄社区', '河南社区', '东李社区', '新河东社区', '百通花宛', '九水路社区', '旭东社区', '福林苑社区'],
                    c: ['福岛小区', '滨河小区', '南庄小区', '台柳路中小区', '河南庄小区'],
                },
               
                HBarData: [
                    { value: 4, name: "楼栋清洁" },
                    { value: 13, name: "楼栋维修" },
                    { value: 12, name: "设备维修" },
                    { value: 15, name: "房屋维修" },
                ],
                lineData: [
                    { value: 3, name: "噪音扰民" },
                    { value: 6, name: "占用走廊" },
                    { value: 10, name: "占用消防通道" },
                    { value: 3, name: "不合规杨宠物" },
                    { value: 13, name: "异常气味" },
                ],
                pieData: [
                    { name: "1人/户", value: 78 },
                    { name: "2人/户", value: 67 },
                    { name: "3人/户", value: 57 },
                    { name: "4人/户", value: 87 },
                    { name: "5人/户", value: 43 },
                    { name: "6人/户", value: 86 },
                    { name: ">6人/户", value: 59 },
                ],
                pieData2: [
                    { name: "1单元", value: 14 },
                    { name: "2单元", value: 34 },
                    { name: "3单元", value: 35 },
                ]

            };
        },
        created() { },
        mounted() { },
        methods: {
            handleClick({ label }) {
                this.title = label
            },
            click(e) {
                this.title = e
            },
           
        },
    };
</script>

<style lang="scss" scoped>
    .buildingOperations-box {
        width: 100%;
        height: 100%;

        /* .left {
            float: left;
            padding-left: 40px;
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;

            p {
                color: #fff;
                margin-bottom: 5px;
                font-size: 16px;
                letter-spacing: 2px;
            }

            .active {
                color: #00cdf9;

            }
        } */

        .right {
            float: right;
            width: 100%;
            height: 100%;

            .echarts {
                width: 100%;
                height: calc(100% - 40px) !important;
            }
        }
    }
</style>
<style lang="scss">
    .buildingOperations-box {
        .el-tabs__item {
            padding: 0 20px !important;
            color: #fff;
            font-weight: bold;
            font-size: 16px !important;
        }

        .el-tabs__item.is-active {
            color: #00cdf9;
        }
    }
</style>